
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
      <p v-if="num > 0.5">随机数 > 0.5</p>
      <p v-else>随机数 <= 0.5</p>
      <button @click="num = Math.random()" >随机数：{{num}}</button>
    
      <hr />
      <p v-if="type === 'A'">优秀</p>
      <p v-else-if="type === 'B'">良好</p>
      <p v-else-if="type === 'C'">一般</p>
      <p v-else>差</p>
      <button @click="type = typeData[Math.floor(Math.random()*typeData.length)]" >等级：{{type}}</button>
      
      <hr />
      <div v-show="a">
        v-show测试
      </div>
    
      <button @click="a = !a">点击</button>
    </div>
    

    <script>
        const { createApp } = Vue
        createApp({
          data() {
            return {
              num:0,
              type:'A',
              typeData:['A','B','C','D'],
              a:false,
            }
          }
        }).mount('#app')
      </script>
</body>
</html>